<html> 
    <head> 
        <title></title> 
        <link rel="stylesheet" type="text/css" href="css/present.css" /> 
<script type="text/javascript">
$(function() {
   $(".hide").hide();
   sub = { index:0, steps: [], step: function() {sub.steps[sub.index++]();}};
   sub.steps.push(function() {$(".step1").show();});
   sub.steps.push(function() {$(".init").hide();$(".step1").hide();$(".step3").show();});
   sub.steps.push(function() {animateCode("step3z","step3zb");});
   sub.steps.push(function() {$(".step3ab").slider({min: 0, max: 100, step:1, slide: function (event, ui) { $('.height').html(ui.value);$('.width').html(ui.value/2);}});animateCode("step3a","step3ab");$('control').show()});
   sub.steps.push(function() {animateCode("step3b","step3bb");});
   sub.steps.push(function() {animateCode("step3c","step3cb");});
   sub.steps.push(function() {$(".step1").hide();$(".step6").show();});
   sub.next= function () { return sub.index >= sub.steps.length };
});
</script>

    </head> 
<body class="jsxgraph_body"> 
<ul> 
<li class="init">iScriptDesign accepts SVG and extended SVG (jsvg)</li>
<li class="step1 hide">It's SVG enhanced with pre-processing directives</li>
<li class="step1 hide">A directive is like a cell in a spreadsheet, one change may ignite a cascade of recalculations in your worksheet</li>
<li class="step1 hide">A change to a slider or an input field causes your sketch to be recalculated and redrawn</li>
<li class="step3 hide">4 Different directives: 
<li class="step3 hide indent">Comment directives:<div class="code step3z"><pre>--{ comment } </pre></div><div class="step3zb hide"></div></li>
<li class="step3 hide indent">Control directive:<span class="hide control">( stretchbox.height is initialized to 100 )</span><div class="code step3a"><pre>@{ type:slider, var:stretchbox.height, label:height, defaultvalue:100
, size:3, min:20, max:300, step:1 }</pre></div>
       <div class="step3ab hide"></div></li>
<li class="step3 hide indent">Evaluation directive<div class="code step3b"><pre>${ stretchbox.width = Math.sin(Math.PI/6) * stretchbox.height; }</pre>
       <div class="step3bb hide">''</div></li>
<li class="step3 hide indent">Substitution directive<div class="code">&lt;path d="l <span class="step3c">#{ stretchbox.width }</span><span class="step3cb hide height">100</span> <span class="step3c">#{ stretchbox.height}</span><span class="step3cb hide width">50</span>"/&gt</div></li>
<li class="step6 hide">Order of evaluation is as displayed above </li>
</ul>
</body>
</html>
